<template>
  <h2>reactive</h2>
  <p>
    {{ data.name }}的年龄是{{ data.age }},性别是{{
      data.sex === 1 ? "男" : "女"
    }}, 住址是{{ data.address }}，电话是{{ data.phone }}
  </p>
  <button @click="add">btn</button>
</template>

<script>
// import { ref } from "vue";

// reactive用于一次性定义多个变量的时候
// form表单提交的时候
import { reactive } from "vue";
export default {
  setup() {
    // const name = ref("pengshao");
    // const age = ref(20);
    // const sex = ref(1);
    // const address = ref("jiubao");
    // const phone = ref("138");

    const data = reactive({
      name: "pengshao",
      age: 20,
      sex: 1,
      address: "jiubao",
      phone: "138",
    });

    const add = () => {
      // console.log(data.age);
      data.age++;
    };

    return {
      data,
      add,
    };
  },
};
</script>
